<template>
    <view class="container p-20">
        <view class="fs-36 fw-600 py-20">PHQ-9 抑郁状况评估</view>
        <view class="flex justify-between fs-22">
            <view>测评时间：2025.02.10 07:11</view>
            <view>用时：25分12秒</view>
        </view>
        <view class="container__card container__card--bg mt-30">
            <view class="flex justify-between fs-40">
                <view class="fw-600">55<text class="fs-22">分</text></view>
                <view class="fw-600">中度</view>
            </view>
            <view class="my-20 flex flex-wrap">
                <view class="flex-1 fs-22 pl-8 h-100" style="writing-mode: vertical-lr;border-left:1px #ae9ce1 dashed;"
                    v-for="(item,index) in ['无','轻度','中度','中重度','重度'] " :key="index">
                    {{item}}
                </view>
                <view class="w-100vw">
                    <uv-line-progress :percentage="55" :showText="false" height="5"
                        active-color="#bd75fa"></uv-line-progress>
                </view>
            </view>
            <view class="text-justify fs-26 mt-30">
                从测试的结果看，你在过去的两周里，可能有轻微的情绪波动或者轻微的抑郁情绪，这些情绪尚在你可以应付的范围内。日常生活中，你基本上可以维持正常的社交和工作，有一些时候，你可能会感到疲惫，失去活动，对事物缺乏兴趣。
            </view>
        </view>
        <view class="container__title">您的情绪结构图：</view>
        <view class="container__card">

            <l-echart ref="chartRef"></l-echart>
        </view>
        <view class="container__title">建议：</view>
        <view class="container__card text-justify fs-26">
            1.保持健康的生活习惯，保证均衡的饮食，定期规律的进行有强度的体育活动，有意识的调整自己的作息，保证充足的睡眠。<br />
            2.尝试多与你信任的人沟通，无论是家人还是朋友，向他
            们表达你目前的心情和所需要的陪伴。<br />
            3.如果你偶尔因为生活中的突发事件体验到比较强烈的抑
            郁情绪时，尝试允许和接纳抑郁这种情绪的存在，在不同时期中，心情的起伏是正常的反应，允许自己花点时间从从难过中恢复。<br />
            4.如果你感到抑郁情绪影响了你现在的生活或是自己无法
            消化处理，甚至有变严重的倾向，建议及时群求精神科或者专业心理咨询的帮助。
        </view>
        <view class="container__title">成长建议：</view>
        <view class="container__card text-justify fs-26 flex">
            <view>
                <view class="rounded flex items-center justify-center p-20" style="background-color: #b3aaed;">
                    <uv-icon name="e617" customPrefix="fx" color="#fff" size="30"></uv-icon>
                </view>
            </view>
            <view class="advice">
                根据你的测试结果，为你推荐<text style="color: #7966ed;">首次咨询</text>服务。平台认证的<text
                    style="color: #7966ed;">专业咨询师</text>通过50分钟以上的1V1线上访谈评估，帮你快速疏导情绪，理清现实议题。
                <view>针对你当前的困扰提供快速而有效的心理健康服务与解决方案</view>
            </view>
        </view>
    </view>
    <view class="container__footer h-140">
        <TabBar theme="custom">
            <template #bar>
                <Mybutton title="了解1对1首次咨询" :transition="true" color="#fff" width="380rpx" borderRadius="30rpx">
                </Mybutton>
            </template>
        </TabBar>
    </view>
</template>
<script setup lang="ts">
    import TabBar from "@/components/TabBar.vue";
    import Mybutton from "@/components/Button.vue";
    import { onMounted, ref } from "vue";
    const echarts = require('../../uni_modules/lime-echart/static/echarts.min');
    const chartRef = ref(null);
    const option = {

        radar: {
            // shape: 'circle',
            indicator: [
                { name: '盈利能力', max: 6500 },
                { name: '选股能力', max: 16000 },
                { name: '择时能力', max: 30000 },
                { name: '稳赢能力', max: 38000 },
                { name: '风控能力', max: 52000 },

            ],
            axisName: {
                color: '#4f27c0',
                fontSize: 14,
                padding: [3, 5]
            }
        },
        series: [
            {
                name: '',
                type: 'radar',
                data: [
                    {
                        value: [5000, 14000, 28000, 26000, 42000],
                        areaStyle: {
                            color: 'rgba(193, 185, 225, 0.6)'
                        }
                    }
                ]
            }
        ]
    };
    onMounted(() => {
        // 组件能被调用必须是组件的节点已经被渲染到页面上
        setTimeout(async () => {
            if (!chartRef.value) return
            const myChart = await chartRef.value.init(echarts)
            myChart.setOption(option)
        }, 300)
    })
</script>
<style scoped lang="scss">
    .container {
        min-height: 100vh;
        background: linear-gradient(to bottom, #d5d4fc, #f5f7ff);

        &__title {
            padding: 20rpx 10rpx;
        }

        &__card {
            background-color: #fff;
            padding: 40rpx;
            border-radius: 20rpx;

            &--bg {
                background: linear-gradient(to bottom, #9765e1, #474bb4);
                color: #fff;
            }

        }

        .advice {
            background-color: #f1f3ff;
            padding: 20rpx;
            border-radius: 20rpx;
            color: #454b61;
        }
    }
</style>